<template>
  <a-spin :spinning="loading">
    <!-- 标题 -->
    <div class="modal-header">
      <div class="modal-title">
        <span>{{ l('Move') }}</span>
      </div>
    </div>
    <div class="modal-body">
      <a-tree-select
        v-model:value="swelectvalue"
        show-search
        :tree-data="treeData"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :placeholder="l('Move')"
        allow-clear
      >
      </a-tree-select>
    </div>
    <!-- 按钮 -->
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        <close-circle-outlined />
        {{ l('Cancel') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="handleSubmit()">
        <save-outlined />
        {{ l('Save') }}
      </a-button>
    </div>
  </a-spin>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { SysFileListDto, SysFileServiceProxy } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  import { CloseCircleOutlined, SaveOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    components: {
      CloseCircleOutlined,
      SaveOutlined,
    },
    name: 'move-file',
    mixins: [ModalComponentBase],
    props: {
      item: SysFileListDto,
    },
    data() {
      return {
        name: '',
        sysFileServiceProxy: new SysFileServiceProxy(),
        swelectvalue: '',
        directoryLists: new Array<any>(),
        treeData: [],
        moveId: '',
      };
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        this.loading = true;
        this.sysFileServiceProxy
          .getDirectories()
          .finally(() => {
            this.loading = false;
          })
          .then((res) => {
            res.splice(
              0,
              0,
              Object.assign({
                id: '',
                parentId: '',
                name: '根目录',
              }),
            ); // 往数组中添加一个对象
            res.forEach((element) => {
              this.directoryLists.push({
                key: element.id,
                value: element.id,
                parentId: element.parentId,
                code: element.code,
                title: element.name,
              } as any);
            });
            this.treeData = this.listConvertTree(this.directoryLists, null);
            this.swelectvalue = this.moveId;
          });
      },
      listConvertTree(data, parentId) {
        let convertData = [];
        let isdisabled = false;
        data.forEach((item) => {
          if (item.parentId === this.moveId) {
            item.disabled = true;
            isdisabled = true;
          } else {
            item.disabled = false;
            isdisabled = false;
          }
          if (item.parentId === parentId) {
            convertData.push(item as never);
            this.convertChild(data, item, item.key, isdisabled);
          }
        });
        return convertData;
      },
      convertChild(arr, parentItem, parentId, isdisabled?: any) {
        parentItem.children = parentItem.children ? parentItem.children : [];
        arr.forEach((item) => {
          item.disabled = isdisabled;
          if (item.parentId === parentId) {
            parentItem.children.push(item);
            this.convertChild(arr, item, item.key);
          }
        });
        return parentItem.children;
      },
      /**
       * 提交数据
       */
      handleSubmit() {
        let isParent: boolean =
          this.directoryLists.find((item) => item.key === this.swelectvalue).parentId ===
          this.item?.id;
        if (this.swelectvalue === this.item?.id || isParent) {
          this.notify.warn(this.l('TheParentFolderCannotBeMovedToItSelfAndItsSubfolders'));
          return;
        }
        this.loading = true;
        this.sysFileServiceProxy
          .move(
            Object.assign({
              id: this.item?.id,
              newParentId: this.swelectvalue,
            }),
          )
          .finally(() => {
            this.loading = false;
          })
          .then((res) => {
            this.notify.success(this.l('SavedSuccessfully'));
            this.success(res);
          });
      },
    },
  });
</script>

<style lang="less" scoped></style>
